<template>
  <div class="box">
    <h1>B组件,{{ num }}</h1>
    <div v-for="item in goods.filterList">
      {{ item.name }} --- {{ item.price }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useCounter } from "../../store/count";
import { useGoods } from "../../store/goods";
// const { num } = useCounter(); //对于状态机数据的解构，可能会导致其失去响应性
const { num } = storeToRefs(useCounter()); //解决响应性丢失的问题
const goods = useGoods();
</script>

<style scoped>
.box {
  height: 500px;
  border: 1px solid red;
  width: 45%;
}
</style>
